<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 3000px;
            height: 5000px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow: hidden;
        }

        .sub {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div id="first" class="box">
        <div class="sub"></div>
    </div>


</body>
<script>



    // var box = document.querySelector(".box");
    // var span = document.querySelector("span")

    var box = document.getElementById("first");

    document.onmousedown = function (e) {//event
        //  e  常规浏览器
        // 低版本ie   window.event 

        // 事件对象的兼容
        var e = e || window.event;

        console.log(e);
        // console.log(e.clientX, e.clientY);
        // console.log(e.pageX, e.pageY);
        // console.log(e.screenX, e.screenY);
        console.log(e.offsetX, e.offsetY);
        console.log(e.pageX - box.offsetLeft, e.pageY - box.offsetTop);
        // console.log(e.button);
    }




    //   鼠标按下   （点 鼠标左键 滑轮键 右键）   怎么知道是哪个键位？
    // box.onmousedown = function () {
    //     console.log("鼠标按下");
    // }

    // 鼠标移动
    // document.onmousemove = function () {
    //     console.log("鼠标在移动")
    // }

    // // 鼠标松开时触发此事件
    // box.onmouseup = function () {
    //     console.log("鼠标抬起来了");
    // }

    // 1. 鼠标跟随
    // 2. 鼠标拖拽




</script>

</html>